<template>
  <div class="bottom-view">
    <el-card class="view">
      <template #header>关键词搜索</template>
      <div class="search-body">
        <div class="chart-wrap">
          <div class="chart">
            <div class="title">搜索用户数</div>
            <div class="count">{{lineData.totalUser | numberFormat}}</div>
            <v-chart :options="getOptions('userList')" autoresize/>
          </div>
          <div class="chart">
            <div class="title">搜索用户数</div>
            <div class="count">{{lineData.totalCount | numberFormat}}</div>
            <v-chart :options="getOptions('countList')" autoresize/>
          </div>
        </div>

        <el-table
          :data="tableData"
          row-key="no">
          <el-table-column prop="no" label="排行"/>
          <el-table-column prop="word" label="关键字"/>
          <el-table-column prop="count" label="搜索数量"/>
          <el-table-column prop="user" label="搜索用户数"/>
          <el-table-column prop="percent" label="搜索占比"/>
        </el-table>

        <el-pagination
          layout="prev, pager, next"
          :total="totalTableData.length"
          :current-page.sync="currentPage"
          :page-size="pageSize">
        </el-pagination>

      </div>
    </el-card>


    <el-card class="view">
      <template #header>
        <div>分类销售排行</div>
        <el-radio-group v-model="radioSelect" size="small">
          <el-radio-button label="品类" ></el-radio-button>
          <el-radio-button label="商品"></el-radio-button>
        </el-radio-group>
      </template>
      <v-chart :options="getPieOptions()" class="search-body"></v-chart>
    </el-card>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'BottomView',

  data () {
    return {
      radioSelect: '商品',
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页数量
    }
  },

  computed: {
    /* 
    "searchWord": [
      {
      "word": "北京",
      "count": 3440,
      "user": 1626
    }]
    "saleRank": {
      "category": {
        "axisX": ["粉面粥店", "简餐便当", "汉堡披萨", "香锅冒菜", "小吃炸串", "地方菜系", "轻食简餐"],
        "data1": [56, 52, 95, 41, 30, 69, 63]
      },
      "goods": {
        "axisX": ["草莓", "甘蔗", "榴莲", "菠萝", "香蕉", "梨", "苹果"],
        "data1": [68, 15, 41, 56, 70, 25, 31]
      }
    }
    */
    ...mapState({
      searchWord: state => state.data.reportData.searchWord,
      saleRank: state => state.data.reportData.saleRank,
    }),

    /* 
    用于显示列表的所有搜索对象的数组: totalTableData
		this.searchWord
		给搜索对象添加2个属性: 排名(no) / 占比(percent)
    */
    totalTableData () {
      // 如果还没有数据返回空数组
      if (!this.searchWord) return []

      return this.searchWord.map((item, index) => {

        return {
          ...item,
          no: index + 1,
          percent: (item.user * 100 / item.count).toFixed(2) + '%'
        }
      })
    },

    /* 
    用于显示当前列表的搜索对象的数组: tableData
      从totalTableData中过滤出当前页的数据列表
      当前页: currentPage: 1
      每页数量: pageSize: 5
      1: 0---4
      2: 5---9
      3: 10---14
      currentPage: (currentPage-1) *5---currentPage*5-1
    */
    tableData () {
      const {currentPage, totalTableData, pageSize} = this

      // return totalTableData.filter((item, index) => {
      //   return index>=(currentPage-1) *pageSize && index<=currentPage*pageSize
      // })

      return totalTableData.slice((currentPage-1) *pageSize, currentPage*pageSize)
    },

    /* 
    数据源: this.searchWord
    // 对要显示的数据进行特定整理(处理)的操作
    totalUser: 搜索用户总数
    totalCount: 搜索总量
    wordList: 搜索关键字列表
    userList: 搜索用户数列表
    countList: 搜索量列表
    使用computed ==> 计算产生的数据是什么结构? {}
    */
    lineData () {
      const data = {
        totalUser: 0,
        totalCount: 0,
        wordList: [],
        userList: [],
        countList: [],
      }

      if (this.searchWord) {
        this.searchWord.forEach(item => {
          /* 
          {
              "word": "北京",
              "count": 3440,
              "user": 1626
            }
          */
          data.totalUser += item.user
          data.totalCount += item.count
          data.wordList.push(item.word)
          data.userList.push(item.user)
          data.countList.push(item.count)

        });
      }
      return data
    },

    /* 
    饼图数据
    品类饼图数组: categoryList
    商品饼图数组: goodsList
    	{
    		name: '粉面粥店|13.12%',
    		value: 68,
    		percent: '13.12%',
    		labelName: '粉面粥店'
    	}
    计算属性: pieData:
    	{
    		categoryList: [],
    		goodsList: []
    	}
    */
    pieData () {
      // 准备要返回的数据对象
      const data = {
    		categoryList: [],
    		goodsList: []
    	}

      const {saleRank} = this
      if (saleRank) {
        // 深度解构/解构别名
        const {category: {axisX, data1}, goods: {axisX: axisX2, data1: data2}} = saleRank
        /* 
        "axisX": ["粉面粥店", "简餐便当", "汉堡披萨", "香锅冒菜", "小吃炸串", "地方菜系", "轻食简餐"],
        "data1": [56, 52, 95, 41, 30, 69, 63]

        {
          name: '粉面粥店|13.12%',
          value: 68,
          percent: '13.12%',
          labelName: '粉面粥店'
        }
        */
        // 总数量
        const total = data1.reduce((pre, item) => pre + item, 0)
        // 将总数添加到data.categoryList上
        data.categoryList.total = total

        axisX.forEach((item, index) => {
          // 求出百分比
          const percent = (data1[index] * 100 / total).toFixed(2) + '%'

          data.categoryList.push({
            name: item + '|' + percent,
            percent,
            value: data1[index],
            labelName: item
          })
        })

        // 总数量2
        const total2 = data2.reduce((pre, item) => pre + item, 0)
        // 将总数添加到data.goodsList上
        data.goodsList.total = total2
        
        axisX2.forEach((item, index) => {
          // 求出百分比
          const percent = (data2[index] * 100 / total2).toFixed(2) + '%'

          data.goodsList.push({
            name: item + '|' + percent,
            percent,
            value: data2[index],
            labelName: item
          })
        })
      }

      return data
    }

  },

  methods: {
    getOptions (dataName) {
      const data = this.lineData[dataName]
      const xAxisData = this.lineData.wordList // 注意一定要先检查一下数据对不对
      // console.log(data, xAxisData)
      return {
        xAxis: {
          show: false,
          data: xAxisData
        },
        yAxis: {
          show: false
        },
        series: {
          type: 'line',
          data,
          areaStyle: { // 区域颜色
            color: '#D8EEFF'
          },
          itemStyle: { // 点不可见
            opacity: 0
          },
          lineStyle: { // 线的颜色
            color: '#6CC1FF'
          },
          smooth: true, // 平滑
        },
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
        },
        tooltip: {
          trigger: 'axis'
        }
      }
    },

    getPieOptions () {
      const text = this.radioSelect + '分布'
      const data = this.radioSelect==='品类' ? this.pieData.categoryList : this.pieData.goodsList

      return {
        // 标题
        title: [
          {
            text,
            textStyle: {
              fontSize: 16
            }
          },

          {
            text: '累计订单量',
            subtext: data.total,
            left: '28%',
            top: '45%',
            textAlign: 'center',
            textStyle: {
              fontSize: 14,
              color: '#999'
            },
            subtextStyle: {
              fontSize: 20,
              color: '#333'
            }
          }
        ],

        tooltip: {
          trigger: 'item',
          formatter (params) {
            // marker / data /seriesName
            // console.log(params)
            const {marker, data: {value, percent, labelName}, seriesName} = params
            return `${seriesName}<br>
                  ${marker}${labelName}<br>
                  ${marker}${value}<br>
                  ${marker}${percent}
                `
          }
        },
        // 图例
        legend: {
          orient: 'vertical',
          top: '35%',
          left: '75%'
        },
        series: [
          {
            name: text,
            type: 'pie',
            center: ['30%', '50%'],
            radius: ['30%', '45%'],
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
             formatter (params) {
               console.log(params)
               return params.data.labelName
             }
            },
            labelLine: { // 引导线
              length: 5,
              length2: 5
            },
            data
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .bottom-view {
    margin-top: 20px;
    display: flex;
    .view {
      flex: 1;
      &:first-child {
        margin-right: 10px;
      }
      &:last-child {
        margin-left: 10px;
      }

      ::v-deep.el-card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
      }

      .search-body {
        height: 450px;
        .chart-wrap {
          display: flex;
          .chart {
            flex: 1;
            &:first-child {
              margin-right: 5px;
            }
            &:last-child {
              margin-left: 5px;
            }
            .title {
              color: #999;
            }
            .count {
              font-size: 25px;
              letter-spacing: 2px;
            }
            .echarts {
              height: 50px;
            }
          }
        }

        .el-pagination {
          margin-top: 10px;
          text-align: right;
        }
      }
    }
  }
</style>
